<template>
  <div class="item-box" :class="{'border-bottom-1px': borderShow}">
    <div class="left-box">
      <span>{{leftText}}</span>
    </div>
    <div class="input-box" v-if="!rightText" :style="{'width': (rightCode ? '40%' : '45%')}">
      <slot name="middledom"></slot>
    </div>
    <div class="right-box" v-if="rightText">
      <span>{{rightText}}</span>
    </div>
    <div class="company-box" v-if="!rightText" :style="{'width': (rightCode ? '30%' : '25%')}">
      <span class="error" v-show="onErrorTips">!</span>
      <span>{{onErrorTips}}</span>
      <span class="right" v-show="companyText">{{companyText}}</span>
      <span class="right-arrow" v-show="rightArrow"></span>
      <slot name="rightdom"></slot>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    leftText: {
      type: String,
      default: ''
    },
    rightText: {
      type: String,
      default: ''
    },
    companyText: {
      type: String,
      default: ''
    },
    rightArrow: {
      type: Boolean,
      default: false
    },
    rightCode: {
      type: Boolean,
      default: false
    },
    borderShow: {
      type: Boolean,
      default: true
    },
    onErrorTips: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
    }
  },
}
</script>
<style lang='scss' scoped>
.item-box {
  height: 0.9rem;
  display: flex;
  align-items: center;
  .left-box {
    width: 30%;
    span {
      font-size: 0.28rem;
      font-size: 500;
      color: rgba(102, 102, 102, 1);
    }
  }
  .right-box {
    width: 70%;
    span {
      font-size: 0.28rem;
      color: rgba(51, 51, 51, 1);
    }
  }
  .input-box {
    width: 60%;
    span,
    input {
      width: 100%;
      font-size: 0.24rem;
      color: #333333;
    }
  }
  .company-box {
    width: 10%;
    text-align: right;
    span {
      font-size: 0.24rem;
      color: #ff3131;
    }
    .right-arrow {
      display: inline-block;
      width: 0.18rem;
      height: 0.18rem;
      border-top: 1px solid #999;
      border-right: 1px solid #999;
      transform: rotate(45deg);
      margin-right: 0.3rem;
    }
    .right {
      margin-left: 0.1rem;
      color: #bc903a;
    }
    .error {
      display: inline-block;
      vertical-align: middle;
      width: 0.26rem;
      height: 0.26rem;
      line-height: 0.26rem;
      background: #ff3131;
      border-radius: 50%;
      text-align: center;
      font-size: 0.24rem;
      color: #fff !important;
      margin-right: 0.04rem;
    }
  }
}
</style>
